import 'package:azlistview/azlistview.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:sinosheets/components/CountryPicker/CityModel.dart';
import 'package:sinosheets/utils/theme/style_utils.dart';

import 'logic.dart';

class CountryPickerPage extends StatefulWidget {
  const CountryPickerPage({Key? key}) : super(key: key);

  @override
  State<CountryPickerPage> createState() => _CountryPickerPageState();
}

class _CountryPickerPageState extends State<CountryPickerPage> {
  final CountryPickerLogic logic = Get.put(CountryPickerLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CountryPickerLogic>(builder: (get) {
      return Scaffold(
        appBar: AppBar(
          title: Text('country_region'.tr, style: TextStyle(fontSize: 22.r, fontWeight: FontWeight.bold, color: Colors.black)),
          elevation: 0,
          centerTitle: false,
        ),
        body: countryListWidget(get),
        bottomNavigationBar: PreferredSize(preferredSize: Size(1.sw, 50.r), child: _searchWidget(get)),
      );
    });
  }

  //搜索框
  Widget _searchWidget(CountryPickerLogic get) {
    return Container(
      height: 50.r,
      padding: EdgeInsets.symmetric(horizontal: 10.r),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10.r),
            decoration: BoxDecoration(
              color: ColorUtils.c_f8f8f8,
              borderRadius: BorderRadius.circular(5.r),
            ),
            height: 40.r,
            child: TextField(
              controller: get.searchController,
              style: StyleUtils.ts_1f_12_400,
              decoration: InputDecoration(
                hintText: 'country_region'.tr,
                hintStyle: StyleUtils.ts_99_12_400,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.r),
                  borderSide: BorderSide.none,
                ),
                filled: true,
                fillColor: ColorUtils.c_f8f8f8,
                prefixIcon: Icon(
                  Icons.search,
                  size: 20.r,
                  color: ColorUtils.themeColor,
                ),
                isCollapsed: false,
                contentPadding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 0),
              ),
              onChanged: (value) {
                get.searchCountry(value);
              },
            ),
          ),
          SizedBox(
            height: 10.r,
          ),
        ],
      ),
    );
  }

  //国家列表
  Widget countryListWidget(CountryPickerLogic get) {
    return get.isSearch
        ? ListView.builder(
            itemCount: get.searchList.length,
            itemBuilder: (BuildContext context, int index) {
              return countryItemWidget(get.searchList[index], get);
            },
          )
        : AzListView(
            data: get.cList,
            itemCount: get.cList.length,
            itemBuilder: (BuildContext context, int index) {
              if (index == 0 && get.hList.isNotEmpty) return hotWidget(get);
              return countryItemWidget(get.cList[index], get);
            },
            susItemHeight: 44.r,
            susItemBuilder: (BuildContext context, int index) {
              CityModel model = get.cList[index];
              String tag = model.getSuspensionTag();
              if (tag == 'Hot') {
                return Container();
              }
              return getSusItem(tag, susHeight: 40.r);
            },
          );
  }

  //顶部热门地区
  Widget hotWidget(CountryPickerLogic get) {
    return Column(
      children: [
        getSusItem('hot'.tr, susHeight: 40.r),
        Padding(
          padding: EdgeInsets.only(left: 10.r, right: 20.r, top: 10.r),
          child: Wrap(
            alignment: WrapAlignment.start,
            runAlignment: WrapAlignment.center,
            spacing: 10.r,
            children: get.hList.map((item) {
              // 国旗路径
              String flag = (item.code.toString()).toLowerCase();
              String assFlag = 'assets/flags/$flag.png';
              return GestureDetector(
                onTap: () {
                  get.selectCountry(item.toJson());
                },
                child: Container(
                  // height: 40.r,

                  margin: EdgeInsets.only(bottom: 10.r),
                  decoration: BoxDecoration(
                    color: item.select ? ColorUtils.themeColor : Colors.transparent,
                    border: Border.all(color: ColorUtils.themeColor, width: .5),
                    borderRadius: BorderRadius.circular(15.r),
                  ),
                  child: IntrinsicWidth(
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.r),
                      child: Row(
                        children: [
                          Image.asset(
                            assFlag,
                            width: 32.r,
                            height: 40.r,
                          ),
                          SizedBox(width: 4.r),
                          Expanded(
                              child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(item.nameEn, style: item.select ? StyleUtils.ts_ff_12_500 : StyleUtils.ts_1f_12_400),
                              // Text(item.name, style: item.select ? StyleUtils.ts_ff_10_400 : StyleUtils.ts_99_10_400),
                            ],
                          ))
                        ],
                      ),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        )
      ],
    );
  }

  //地区item
  Widget countryItemWidget(CityModel item, CountryPickerLogic get) {
    // 国旗路径
    String flag = (item.code.toString()).toLowerCase();
    String assFlag = 'assets/flags/$flag.png';

    return item.tag == 'Hot'
        ? Container()
        : GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              get.selectCountry(item.toJson());
            },
            child: Container(
              height: 44.r,
              padding: EdgeInsets.symmetric(horizontal: 15.r),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Image.asset(assFlag, width: 32.r, height: 40.r),
                      SizedBox(width: 8.r),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            item.nameEn,
                            maxLines: 2,
                            style: StyleUtils.ts_1f_12_400,
                          ),
                          // Text(
                          //   item.name,
                          //   maxLines: 2,
                          //   style: StyleUtils.ts_99_10_400,
                          // ),
                        ],
                      )
                    ],
                  ),
                  item.select
                      ? Icon(
                          Icons.check,
                          size: 20.r,
                          color: ColorUtils.themeColor,
                        )
                      : Container(),
                ],
              ),
            ),
          );
  }

  //索引Item
  Widget getSusItem(String tag, {double susHeight = 40}) {
    // if (tag == '★') {
    //   tag = '★ 热门城市';
    // }
    return Container(
      height: susHeight,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left: 15.r),
      color: ColorUtils.themeColor.withValues(alpha: 0.2),
      alignment: Alignment.centerLeft,
      child: Text(
        tag,
        softWrap: false,
        style: StyleUtils.ts_theme_15_400,
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<CountryPickerLogic>();
    super.dispose();
  }
}
